<!-- src/layouts/TabsView.vue -->
<template>
  <div class="tabs-view">
    <el-scrollbar class="tabs-scrollbar">
      <div class="tabs-container">
        <div
          v-for="tab in tabsStore.tabsList"
          :key="tab.path"
          :class="['tab-item', { active: tab.path === tabsStore.activeTab }]"
          @click="handleTabClick(tab)"
          @contextmenu.prevent="handleContextMenu($event, tab)"
        >
          <span class="tab-title">{{ tab.title }}</span>
          <el-icon
            v-if="tab.closable"
            class="tab-close"
            @click.stop="handleTabClose(tab)"
          >
            <Close />
          </el-icon>
        </div>
      </div>
    </el-scrollbar>

    <!-- 右键菜单 -->
    <div
      v-show="contextMenuVisible"
      :style="{ left: contextMenuLeft + 'px', top: contextMenuTop + 'px' }"
      class="context-menu"
    >
      <div class="menu-item" @click="handleRefresh">
        <el-icon><Refresh /></el-icon>
        <span>刷新</span>
      </div>
      <div
        v-if="selectedTab?.closable"
        class="menu-item"
        @click="handleClose"
      >
        <el-icon><Close /></el-icon>
        <span>关闭</span>
      </div>
      <div class="menu-item" @click="handleCloseOthers">
        <el-icon><CircleClose /></el-icon>
        <span>关闭其他</span>
      </div>
      <div class="menu-item" @click="handleCloseRight">
        <el-icon><DArrowRight /></el-icon>
        <span>关闭右侧</span>
      </div>
      <div class="menu-item" @click="handleCloseAll">
        <el-icon><FolderDelete /></el-icon>
        <span>关闭所有</span>
      </div>
    </div>

    <!-- 点击遮罩关闭菜单 -->
    <div
      v-show="contextMenuVisible"
      class="context-menu-mask"
      @click="contextMenuVisible = false"
    ></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useTabsStore } from '@/store/tabs';
import {
  Close,
  Refresh,
  CircleClose,
  DArrowRight,
  FolderDelete,
} from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const tabsStore = useTabsStore();

// 右键菜单相关
const contextMenuVisible = ref(false);
const contextMenuLeft = ref(0);
const contextMenuTop = ref(0);
const selectedTab = ref(null);

// 点击页签
const handleTabClick = (tab) => {
  if (tab.path !== route.path) {
    router.push(tab.path);
  }
};

// 关闭页签
const handleTabClose = (tab) => {
  const targetPath = tabsStore.removeTab(tab.path);
  if (targetPath && targetPath !== route.path) {
    router.push(targetPath);
  }
};

// 右键菜单
const handleContextMenu = (event, tab) => {
  selectedTab.value = tab;
  contextMenuVisible.value = true;
  contextMenuLeft.value = event.clientX;
  contextMenuTop.value = event.clientY;
};

// 刷新当前页面
const handleRefresh = () => {
  contextMenuVisible.value = false;
  router.push({
    path: '/redirect' + selectedTab.value.path,
  });
};

// 关闭当前标签
const handleClose = () => {
  contextMenuVisible.value = false;
  handleTabClose(selectedTab.value);
};

// 关闭其他标签
const handleCloseOthers = () => {
  contextMenuVisible.value = false;
  tabsStore.closeOtherTabs(selectedTab.value.path);
  if (selectedTab.value.path !== route.path) {
    router.push(selectedTab.value.path);
  }
};

// 关闭右侧标签
const handleCloseRight = () => {
  contextMenuVisible.value = false;
  tabsStore.closeRightTabs(selectedTab.value.path);
  // 如果当前页面被关闭了，跳转到选中的页签
  const currentTabExists = tabsStore.tabsList.some(
    (tab) => tab.path === route.path
  );
  if (!currentTabExists) {
    router.push(selectedTab.value.path);
  }
};

// 关闭所有标签
const handleCloseAll = () => {
  contextMenuVisible.value = false;
  tabsStore.closeAllTabs();
  router.push('/dashboard');
};
</script>

<style scoped>
.tabs-view {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  /* 防止外部样式影响布局 */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.tabs-scrollbar {
  height: 36px;
  /* 确保高度固定，不受外部样式影响 */
  min-height: 36px;
  max-height: 36px;
  box-sizing: border-box;
}

.tabs-container {
  display: flex;
  align-items: stretch;
  height: 36px;
  padding: 0 12px;
  gap: 4px;
  /* 固定布局参数 */
  box-sizing: border-box;
  margin: 0;
  line-height: normal;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
  position: relative;
  color: #666;
  border-bottom: 2px solid transparent;
  /* 防止外部样式影响 */
  box-sizing: border-box;
  margin: 0;
  line-height: normal;
  vertical-align: middle;
}

.tab-item:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.04);
}

.tab-item.active {
  color: var(--el-color-primary);
  border-bottom-color: var(--el-color-primary);
}

.tab-title {
  font-size: 13px;
  font-weight: 400;
  /* 固定字体渲染，防止外部样式影响 */
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  vertical-align: middle;
}

.tab-item.active .tab-title {
  font-weight: 500;
}

.tab-close {
  font-size: 16px;
  color: #999;
  transition: all 0.15s ease;
  border-radius: 2px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.tab-item:hover .tab-close {
  opacity: 1;
}

.tab-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

.tab-item.active .tab-close {
  opacity: 1;
  color: var(--el-color-primary);
}

.tab-item.active .tab-close:hover {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary-dark-2);
}

/* 右键菜单 */
.context-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(60, 64, 67, 0.18);
  padding: 8px;
  z-index: 1000;
  min-width: 160px;
  backdrop-filter: blur(10px);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #202124;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.menu-item:hover {
  background: #f8f9fa;
  color: var(--el-color-primary);
  transform: translateX(2px);
}

.menu-item .el-icon {
  font-size: 18px;
  color: #5f6368;
}

.menu-item:hover .el-icon {
  color: var(--el-color-primary);
}

.context-menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

/* 滚动条样式 */
:deep(.el-scrollbar__bar) {
  display: none;
}

:deep(.el-scrollbar__wrap) {
  overflow-x: auto;
  overflow-y: hidden;
}
</style>
